<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/page.css">
</head>
<script>
    $(function () {
        page("go");
    });

    function page(type) {
        let pageNum = $("#pageNum").val();
        if (pageNum < 1) {
            pageNum = 1;
        }
        let count = $("#pageCount").html();
        let pageSize = $("#pageSize").val();
        if (pageSize < 1) {
            pageSize = 10;
        }
        switch (type) {
            case "go":
                break;
            case "first":
                pageNum = 1;
                break;
            case "last":
                if (pageNum != 1) {
                    --pageNum;
                }
                break;
            case "next":
                //如果当前页就是最后一页，那么久没有下一页
                if (Math.ceil(count / pageSize) !== pageNum) {
                    ++pageNum;
                }
                break;
            case "end":
                pageNum = Math.ceil(count / pageSize);
                break;
        }
        if (count > 0) {
            if (pageNum > Math.ceil(count / pageSize))
                pageNum = Math.ceil(count / pageSize);
        }
        $("#pageSize").val(pageSize);
        $("#pageNum").val(pageNum);
        findAll();
    }

    function getPageData(url, da) {
        da.curPage = $("#pageNum").val();
        da.pageSize = $("#pageSize").val();
        let data = myAjax(url, da, "get");
        //直接讲分页的总条数保存到本地
        $("#pageCount").html(data.count);
        return data.list;
    }
</script>
<body>
<div class="page">
    <div>每一页显示<input type="text" id="pageSize" value="10">条</div>
    <div>到<input type="text" id="pageNum" value="1">页</div>
    <div>总共<span id="pageCount"></span>条</div>
    <div onclick=""><a href="javascript:page('go')">跳转</a></div>
    <div><a href="javascript:page('first')">首页 </a></div>
    <div><a href="javascript:page('last')">上一页 </a></div>
    <div><a href="javascript:page('next')">下一页</a></div>
    <div><a href="javascript:page('end')">尾页 </a></div>
</div>
</body>
</html>